<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<style>
    /*加载图标*/
    #loading {
        width: 100%;
        height: 100%;
        display: none;
    }

    #loading::before {
        content: '';
        position: fixed;
        top: 0;right: 0;
        bottom: 0;left: 0;
        background: rgba(0, 0, 0, .5);
    }

    .icon-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #loading img {
        width: 32px;
        height: 32px;
    }
</style>
</head>
<body style="text-align: center; height: 100%">
<div style="margin: 100px auto;">
    <h3>上传在淘宝联盟下载的Excel文件</h3>
    <p style="color:red;">注意： 先在 参数配置 中，配置好对应的列</p>
    <div>
        <form id="uploadForm" th:action="@{/UploadExcel}" method="POST" enctype="multipart/form-data">
            <input type="file" name="excelFile"/>
            <button id="submit-button">上传</button>
        </form>

    </div>
</div>
<div id="loading">
    <div class="icon-wrapper">
        <img src="http://owtl83r0c.bkt.clouddn.com/loading.gif" />
        <span style="color: #FFFFFF">数据上传中...</span>
    </div>
</div>
<script th:inline="javascript">

    $(function () {

        $('#submit-button').on('click', function () {
            $('#uploadForm').submit()
            $('#loading').show()
        })
       var status =  [[${status}]];

       if (status === "SUCCESS"){
           $('#loading').hide()
           alert("文件导入服务器成功，请等待数据写入数据库")
       }else if(status === "failed"){
           $('#loading').hide()
           alert("文件导入失败，请检查网络状况")
       }else if(status === "mapping"){
           $('#loading').hide()
           alert("文件导入失败，请检查系统中Excel映射列的配置")
       }
    });

    $(window.parent.document).find("#main-iframe").load(function () {
        var main = $(window.parent.document).find("#main-iframe")
        var thisheight = $(document).height()
        main.height(thisheight)
    })

</script>
</body>
</html>